<template>
  <div class="optional">
    <div class="tab_header">
      <div class="tab_btn" style="width: 40%;">{{$t('contract_name')}}</div>
      <div class="tab_btn" style="width: 22%;">{{$t('price')}}</div>
      <div class="tab_btn" style="width: 16%;">{{$t('range')}}</div>
      <div class="tab_btn" style="width: 22%;">{{$t('hodings')}}</div>
    </div>
    <div class="tab_list">
      <div @click="getItem(item)" v-for="(item, index) in tablist" :key="index" class="list_tiket">
        <div class="tiket_btn" style="width: 40%;">
          <div style="color: #ffff00;">{{ item.name }}</div>
          <div style="font-size: 12px;color: #656D78;">{{ item.name_code }}</div>
        </div>
        <div
          :class="
            (old_list[item.code2] && old_list[item.code2].price) > (ticket[item.code2] && ticket[item.code2].price)
              ? 'tiket_btn color_r'
              : (old_list[item.code2] && old_list[item.code2].price) == (ticket[item.code2] && ticket[item.code2].price)
              ? 'tiket_btn'
              : 'tiket_btn color_g'
          "
          style="width: 22%;"
        >
          {{ ((ticket[item.code2] && ticket[item.code2].price) || 0).toFixed(2) || '- -' }}
        </div>
        <div :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tiket_btn color_r' : 'tiket_btn color_g'" style="width: 16%;">
          {{ ((ticket[item.code2] && ticket[item.code2].wave) || 0).toFixed(2) || '- -' }}%
        </div>
        <div class="tiket_btn" style="width: 22%;color: #ffff00;">{{ ((ticket[item.code2] && ticket[item.code2].position) || 0).toFixed(0) || '--' }}</div>
      </div>
    </div>
    <!-- 分页部分 -->
    <div class="pagelist" v-if="page_list">
      <div class="pages-title">共 {{ pages }} 页,当前第 {{ newpage }} 页.</div>
      <div @click="jumppages('pre')" v-if="newpage != 1" class="pages-pre">上一页</div>
      <div @click="jumppages('next')" v-if="newpage != pages" class="pages-next">下一页</div>
      <div class="pages-pagenum"><input type="number" :placeholder="$t('input_page_num')" v-model="newpage" @input="pagesnum" /></div>
      <div @click="jumppages('btn')" class="pages-btn">{{$t('jump')}}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*, 推送数据 */
  }),
  watch: {
    ticket(val) {
      let that = this;
      setTimeout(() => {
        that.old_list = val;
        return;
      }, 500);
    },
    page_list(val) {
      if (val == false) {
        $('.tab_list').css('height', 'calc(67vh - 0.8rem)');
      } else if (val == true) {
        $('.tab_list').css('height', 'calc(67vh - 2.8rem)');
      }
    }
  },
  data() {
    return {
      old_list: [] /* 对比行情数据 */,
      //自选列表
      tablist: [],
      page_list: false, //数据分页判断
      pages: 1, //分页总计
      newpage: 1 //当前页码
    };
  },
  mounted() {
    this.optional();
  },
  methods: {
    //获取自选
    optional() {
      this.$get('addons/tf-futures/self-check/list').then(res => {
        if (res.code == 200) {
          this.tablist = res.data;
        }
      });
    },
    getItem(item) {
      this.$store.commit('trade/select', item);
      this.$store.commit('set', { checkselect: true });
      this.$router.push({ path: 'klinepage' });
    },
    // 处理数据过多时候
    pageslist(infolist, pagesnum) {
      this.pages = Math.ceil(infolist.length / 50);
      if (infolist.length > 50) {
        this.page_list = true;
        if (Number(pagesnum) < 2) {
          // console.log('第一页');
          this.tablist = infolist.slice(0, 50);
        } else if (Number(pagesnum) == this.pages) {
          // console.log('最后页');
          let startnum = 50 * (Number(pagesnum) - 1);
          this.tablist = infolist.slice(startnum);
        } else {
          // console.log('第',pagesnum,'页')
          let startnum = 50 * (Number(pagesnum) - 1);
          let endnum = 50 * Number(pagesnum);
          this.tablist = infolist.slice(startnum, endnum);
        }
      } else {
        this.page_list = false;
      }
      if (this.tablist.length > 0) {
        this.tablistcode = [];
        for (let i = 0; i < this.tablist.length; i++) {
          this.tablistcode[i] = this.tablist[i].code;
        }
        this.tablistcode = this.tablistcode.join(',');
        this.$store.commit('set', { tablistcode: this.tablistcode });
      }
    },
    // 输入跳转页码
    pagesnum() {
      this.newpage = Number(this.newpage);
    },
    // 分页按钮
    jumppages(pageinfo) {
      if (pageinfo == 'pre') {
        // console.log('上一页')
        this.newpage--;
      } else if (pageinfo == 'next') {
        // console.log('下一页')
        this.newpage++;
      } else if (pageinfo == 'btn') {
        // console.log('跳转')
        this.newpage = Number(this.newpage);
      }
      this.pageslist(this.symbos.symbols, this.newpage);
    },
    dele(item) {
      var that = this;
      this.$layer.open({
        content: '确定删除自选?',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function() {
          //按钮【按钮一】的回调
          that.$post('addons/tf-futures/self-check/delete-check', { symbol_id: item.id }).then(res => {
            if (res.code == 200) {
              that.optional();
              that.$layer.closeAll();
              that.$layer.msg('已删除自选');
            }
          });
        },
        btn2: function() {
          //按钮【按钮二】的回调
          that.$layer.closeAll();
          that.$layer.msg('已取消');
        },
        cancel: function() {
          //右上角关闭回调
          that.$layer.closeAll();
          that.$layer.msg('已取消');
        }
      });
    }
  }
};
</script>

<style scoped>
.color_r {
  color: #ff210d;
}
.color_g {
  color: #00dc00;
}

.optional {
  width: 100%;
  /* box-sizing: border-box;
  padding: 0.5rem; */
}

/* 名称 */
.tab_header {
  width: 100vw;
  height: 0.8rem;
  display: flex;
  justify-content: flex-start;
}
.tab_header .tab_btn {
  background-color: #1b242b;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.32rem;
  box-sizing: border-box;
}
.tab_list {
  width: 100%;
  height: calc(67vh - 0.8rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.tab_list .list_tiket {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #222;
}
.list_tiket .tiket_btn {
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.32rem;
  box-sizing: border-box;
}
/* 分页部分 */
.pagelist {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pagelist .pages-title {
  width: 4rem;
  color: #fff;
}
.pagelist .pages-pre,
.pagelist .pages-next,
.pagelist .pages-btn {
  margin: 0 5px;
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 3px;
  background: #c93800;
  text-align: center;
  line-height: 0.5rem;
  cursor: pointer;
  color: #fff;
}
.pagelist .pages-pagenum {
  width: 1rem;
  height: 0.5rem;
}
.pagelist .pages-pagenum input {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: none;
  text-align: center;
}
</style>
